<template>
  <div class="container">
    <div class="parent">
      <div class="son first">
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
      </div>
      <div class="son second">
        as specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengths
      </div>
      <div class="son tired">
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
      </div>
    </div>
    <span class="span">4</span>
    <span class="span">5</span>

    <div class="father">
      <div class="son">1</div>
    </div>

    <!-- 等高布局 -->
    <el-button @click="add('add')">增加</el-button>
    <el-button @click="add('reduce')">去除</el-button>
    <div class="equal-altitude">
      <div class="test" ref="test1">
        <div v-for="item in items" :key="item.id">
          {{ item }}
        </div>
      </div>

      <div class="test" :style="{ height: maxHeight + 'px' }">
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
        lengthsas specified, but with relative lengths converted into absolute
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxHeight: 0,
      items: [1, 2, 3, 4, 5, 6, 4, 7, 4],
      flatData: [
        { id: 1, name: "首页", pid: 0, type: 1 },
        { id: 2, name: "系统权限", pid: 0, type: 1 },
        { id: 3, name: "角色管理", pid: 2, type: 2 },
        { id: 6, name: "添加角色", pid: 3, type: 3 },
        { id: 7, name: "修改角色", pid: 3, type: 3 },
        { id: 8, name: "删除角色", pid: 3, type: 3 },
        { id: 9, name: "配置权限", pid: 3, type: 3 },
        { id: 4, name: "用户管理", pid: 2, type: 2 },
        { id: 5, name: "权限管理", pid: 2, type: 2 },
        { id: 10, name: "权限管理22", pid: 5, type: 2 },
      ],
    };
  },
  mounted() {
    this.listenSizeChange();
    this.markTree(this.flatData, 0);
  },
  methods: {
    add(type) {
      if (type == "add") {
        this.items.push(1);
      } else {
        this.items.pop();
      }
      this.listenSizeChange();
    },
    listenSizeChange() {
      this.$nextTick(() => {
        this.maxHeight = this.items.length * 24 + 2;
      });
    },
    markTree(flatData = [], parentFlag) {
      let tree = flatData.reduce((c, v) => {
        console.log(v);
        if (v.pid === parentFlag) {
          c.push({ ...v });
        } else {
          let temp = this.findParent(c, v.pid);
          console.log(temp);
          if (temp) {
            temp.children = temp.children || [];

            temp.children = [...temp.children, v];
          }
        }
        return c;
      }, []);
      console.log(tree);
    },
    findParent(tree = [], pid) {
      let temp = null;
      function too(tree, pid) {
        for (const item of tree) {
          if (item.id === pid) {
            temp = item;
            return temp;
          }
          const { children } = item;
          if (children) {
            too(children, pid);
          }
        }
      }
      too(tree, pid);
      return temp;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-bottom: 100px;
}
.parent {
  width: 100vw;
  border: 1px solid #ccc;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  .son {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    // flex: 1;
  }
  .son.second {
    width: 600px;
  }
  .son.first {
    // width: 600px;
    flex-shrink: 30;
  }
  .son.tired {
    flex-shrink: 5;
    align-self: flex-end;
  }
}
.span {
  width: 100px;
  height: 100px;
  margin: 100px 20px; // 行内元素 margin 上下没用
  background-color: red;
}
.father {
  margin-left: 300px;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  // padding: 5px
  // display: flex;
  // border: 1px solid #000; // margin 上下传递现象
  .son {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 100px;
    // float: left;
  }
}
.equal-altitude {
  border: 1px solid #000;
  // height: 100px;
  display: flex;
  .test {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border: 1px solid #000;
    &:nth-child(1) {
      // height: 200px;
    }
    &:nth-child(2) {
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
}
</style>
<!--
  1. flex-base
    1.1 flex-base  的优先级高于width
    1.2 auto / 0 / fill/ content / max-content /min-content
  2. align-self:自己的对齐方式
  3. align-content 多个主轴对齐方式
-->
